<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import { on, off } from '@/libs/tool'
export default {
  name: 'BarHorizontalRank',
  props: {
    value: {
      type: Object,
      default: () => ({
        category: [],
        list: []
      })
    },
    text: String,
    subtext: String,
    color: {
      type: Array,
      default: () => [['rgba(0, 229, 245, 1)', 'rgba(5, 117, 187, 1)']]
    },
    barWidth: {
      type: Number,
      default: 8
    },
    dataZoom: {
      type: Array,
      default: () => []
    },
    grid: {
      type: Object,
      default: function () {
        return {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '5%'
        }
      }
    },
    legend: {
      type: Object,
      default: function () {
        return {
          show: true,
          top: '10px',
          align: 'center'
        }
      }
    }
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    setOption(value) {
      this.value = value
    },
    init() {
      const echarts = require('echarts')
      const textData = []
      for (let i = 0; i < this.value.list[0].length; i++) {
        if (this.value.list[0][i] === 0) {
          textData.push(this.value.list[0][i] + ' ' + '(' + '0' + '%)')
        } else {
          textData.push(
            this.value.list[0][i] +
              ' ' +
              '(' +
              ((this.value.list[0][i] / this.value.list[1][i]) * 100).toFixed(2) +
              '%)'
          )
        }
      }
      if (!this.value || !this.value.list || !this.value.list.length) return false
      var attackSourcesColor = [
        '#3B99DA',
        '#3B99DA',
        '#3B71DA',
        '#E28656',
        '#E2AB56',
        '#3B99DA',
        '#3B99DA',
        '#3B71DA',
        '#E28656',
        '#E2AB56',
        '#3B99DA',
        '#3B99DA',
        '#3B71DA',
        '#E28656',
        '#E2AB56'
      ]

      function attackSourcesDataFmt(sData) {
        var sss = []
        sData.forEach(function (item, i) {
          const itemStyle = {
            color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
          }
          sss.push({
            value: item,
            itemStyle: itemStyle
          })
        })
        return sss
      }
      const option = {
        tooltip: {
          show: false,
          backgroundColor: 'rgba(3,169,244, 0.5)', // 背景颜色（此时为默认色）
          textStyle: {
            fontSize: 16
          }
        },
        color: ['#F7B731'],
        legend: {
          show: this.legend.show,
          data: this.value.legend,
          right: this.legend.right,
          top: this.legend.top,
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 8,
          textStyle: {
            color: '#fff',
            padding: [0, 0, 0, 4]
          }
        },
        grid: {
          // width: '90%',
          // containLabel: true
          ...this.grid
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              label: {
                show: true
              }
            },
            data: this.value.category.map((o, i) => i + 1),
            axisLabel: {
              show: false,
              margin: 0,
              align: 'left',
              padding: [-10, 0, 0, 0],
              color: '#37C2BB',
              fontSize: 24,
              fontStyle: 'oblique'
            },
            splitLine: {
              show: false
            }
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            offset: -10,
            position: 'right',
            axisLabel: {
              interval: 0,
              color: function (params, index) {
                const color = ['#3B99DA', '#3B99DA', '#3B71DA', '#E28656', '#E2AB56']
                return color[index]
              },
              align: 'right',
              verticalAlign: 'bottom',
              lineHeight: 32,
              fontSize: 16,
              fontWeight: 'bold',
              padding: [0, 0, 0, 0],
              fontFamily: 'iconfont'
              // rich: {
              //   a:{
              //     color:'#A9E4E1'
              //   },
              //    b:{
              //     color:'#3B99DA'
              //   }
              // }
            },
            data: textData,
            splitLine: {
              show: false
            }
          },
          // {
          //   type: 'category',
          //   axisTick: 'none',
          //   axisLine: 'none',
          //   position: 'right',
          //   axisLabel: {
          //     color: '#fff',
          //     align: 'right',
          //     verticalAlign: 'bottom',
          //     lineHeight: 15
          //   },
          //   data: this.value.category.map(o => '环比'),
          //   splitLine: {
          //     show: false
          //   }
          // },
          // {
          //   type: 'category',
          //   axisTick: 'none',
          //   axisLine: 'none',
          //   position: 'right',
          //   axisLabel: {
          //     color: '#fff',
          //     align: 'right',
          //     verticalAlign: 'bottom',
          //     lineHeight: -15
          //   },
          //   data: this.value.category.map(o => '2位'),
          //   splitLine: {
          //     show: false
          //   }
          // },
          {
            // 名称
            type: 'category',
            offset: -10,
            position: 'left',
            axisLine: {
              show: false
            },
            inverse: true,
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              color: function (params, index) {
                const color = ['#3B99DA', '#3B99DA', '#3B71DA', '#E28656', '#E2AB56']
                return color[index]
              },
              align: 'left',
              verticalAlign: 'bottom',
              lineHeight: 32,
              fontSize: 14
            },
            data: this.value.category,
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            zlevel: 1,
            name: this.legend[0],
            type: 'bar',
            barWidth: 10,
            animationDuration: 1500,
            data: attackSourcesDataFmt(this.value.list[0]),
            align: 'center',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            }
          },
          {
            name: this.legend[1],
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            margin: '20',
            data: this.value.list[1],
            textStyle: {
              // 图例文字的样式
              fontSize: 10,
              color: '#fff'
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  const color = ['#A9E4E1', '#D8EFFF', '#D3E0FB', '#F7DCCE', '#E2C856']
                  return color[params.dataIndex]
                },
                barBorderRadius: 30
              }
            }
          }
        ],
        dataZoom: this.dataZoom
      }

      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
    },
    resize() {
      this.dom.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (this.dom) {
          if (newVal) {
            this.setOption(newVal)
            this.init()
          } else {
            this.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    },
    dataZoom: {
      handler(newVal, oldVal) {
        this.init()
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }
}
</script>

<style scoped lang="less">
.charts {
  width: 100%;
  height: 100%;
}
</style>
